<template>
	<view class="content">
		<view>
			<view class="bg_image">
				<view class="header" :style="{'padding-top':marTop+'px'}">
					<image @click="callback" class="icon_right" src="../../static/images/icon_white.png"></image>
					<view class="title">医生首页</view>
				</view>
				<view style="padding-top: 80rpx;">
					<view class="doctorinfoCard">
						<view style="display: flex;">
							<view class="doctor_header">
								<image v-if="doctorData.icon" :src="doctorData.icon"></image>
								<image v-else src="../../../static/images/icon_head@2x.png"></image>
							</view>
							<view class="doctorInfo">
								<view style="font-size: 34rpx;font-weight: bold;">{{doctorData.name?doctorData.name:''}}
								</view>
								<view style="margin-top: 5rpx;">
									<text>{{doctorData.deptName?doctorData.deptName:""}}</text>
									<text v-show="doctorData.jobTitle"
										style="padding: 0 10rpx;">|</text><text>{{doctorData.jobTitle?doctorData.jobTitle:""}}</text>
								</view>
								<view style="margin-top: 5rpx;" class="gray_font">
									{{doctorData.hospitalName?doctorData.hospitalName:''}}
								</view>
							</view>
						</view>
						<view>
							<view>
								<view class="goodat">
									<view>医生擅长：</view>
									<view :class="areastatus==0?'csover':'csoverexper'"
										style="color: #7C7C7C;font-size: 30rpx;">
										{{doctorData.areasExpertise?doctorData.areasExpertise:''}}
									</view>
								</view>
								<view v-if="doctorData.areasExpertise.length>20">
									<view class="fontStyle" v-if="areastatus==0" @click="checkall">查看全部</view>
									<view class="fontStyle" v-if="areastatus==1" @click="checkover">收起</view>
								</view>

							</view>
							<view>
								<view class="goodat" style="margin-top: 30rpx;">
									<view>个人简介：</view>
									<view :class="brieftatus==0?'csover':'csoverexper'"
										style="color: #7C7C7C;font-size: 30rpx;">
										{{doctorData.briefIntroduction?doctorData.briefIntroduction:''}}
									</view>
								</view>
								<view v-if="doctorData.briefIntroduction.length>20">
									<view class="fontStyle" v-if="brieftatus==0" @click="birefall">查看全部</view>
									<view class="fontStyle" v-if="brieftatus==1" @click="birefover">收起</view>
								</view>
							</view>
						</view>
					</view>
					<view class="service">
						<view class="icon_line_green"></view>
						<view style="margin-left: 30rpx;">咨询服务</view>
					</view>
					<view class="servicecard">
						<view style="display: flex;justify-content: space-between;">
							<view style="display: flex;">
								<view>
									<image class="img_icon" src="@/static/images/icon_h_mian@2x.png"></image>
								</view>
								<view class="service_content">
									<view class="servicetitle">问诊咨询</view>
									<view style="margin-top: 15rpx;">48小时不限次问诊</view>
								</view>
							</view>
							<view>
								<view style="font-weight: bold;font-size: 30rpx;text-align: right;">
									￥{{doctorData.price?doctorData.price:0}}</view>
								<view v-if="doctorData.isOpen==0" @click="toConsult(1)" class="btn_small"
									style="margin-top: 20rpx;">
									去咨询
									<image style="width: 20rpx;height: 20rpx;" src="../../static/images/write_icon.png">
									</image>
								</view>
								<view v-else class="btn_small_gary" style="margin-top: 20rpx;">
									未开通
									<image style="width: 20rpx;height: 20rpx;" src="../../static/images/gray_icon.png">
									</image>
								</view>
							</view>
						</view>
					</view>
					<view class="servicecard">
						<view style="display: flex;justify-content: space-between;">
							<view style="display: flex;">
								<view>
									<image class="img_icon" src="../../static/images/icon_h_jia@2x.png"></image>
								</view>
								<view class="service_content">
									<view class="servicetitle">免费咨询</view>
									<view style="margin-top: 15rpx;">
										{{doctorData.freeClinicCount?doctorData.freeClinicCount:""}}回合咨询服务
									</view>
								</view>
							</view>
							<view>
								<!-- <view style="font-weight: bold;font-size: 30rpx;text-align: right;">￥100</view> -->
								<view v-if="doctorData.isFreeClinic==0" @click="toConsult(2)" class="btn_small"
									style="margin-top: 20rpx;">
									去咨询
									<image style="width: 20rpx;height: 20rpx;" src="../../static/images/write_icon.png">
									</image>
								</view>
								<view v-else class="btn_small_gary" style="margin-top: 20rpx;">
									未开通
									<image style="width: 20rpx;height: 20rpx;" src="../../static/images/gray_icon.png">
									</image>
								</view>
							</view>
						</view>
					</view>
					<view class="service">
						<view class="icon_line_green"></view>
						<view style="margin-left: 30rpx;">药品服务</view>
					</view>
					<view class="servicecard" style="margin-bottom: 50rpx;">
						<view style="display: flex;justify-content: space-between;">
							<view style="display: flex;">
								<view>
									<image class="img_icon" src="../../static/images/icon_h_shen@2x.png"></image>
								</view>
								<view class="service_content">
									<view class="servicetitle" style="margin-top: 25rpx;">申请开方</view>
									<!-- <view style="margin-top: 15rpx;">3回合咨询服务</view> -->
								</view>
							</view>
							<view>
								<!-- <view style="font-weight: bold;font-size: 30rpx;text-align: right;">￥100</view> -->
								<view v-if="doctorData.isOpen==0" @click="toRePurchase" class="btn_small"
									style="margin-top: 20rpx;">
									去申请
									<image style="width: 20rpx;height: 20rpx;" src="../../static/images/write_icon.png">
									</image>
								</view>
								<view v-else class="btn_small_gary" style="margin-top: 20rpx;">
									未开通
									<image style="width: 20rpx;height: 20rpx;" src="../../static/images/gray_icon.png">
									</image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		doctorDetail
		// bindDoctor
	} from '@/api/user.js';
	import store from '@/store';
	import {
		openWenzhenSubscribe,
		weChatListTempSet
	} from '@/utils/SubscribeMessage.js';
	export default {
		data() {
			return {
				marTop: 0,
				doctorData: {
					areastatus: 0,
				},
				id: 0,
				areastatus: 0,
				brieftatus: 0,
				doctorId: 0 // 从路由上(二维码)获取医生id
			}
		},
		onLoad: function (option) {
		  this.doctorId = option.doctorId ||0
		},
		onShow() {
			let pagearr = getCurrentPages(); //获取应用页面栈
			let currentPage = pagearr[pagearr.length - 1]; //获取当前页面信息
			let option = currentPage.options //获取页面传递的信息
			console.log('option:', currentPage.options)
			const res = wx.getMenuButtonBoundingClientRect()
			this.marTop = res.top + 5;
			//检查缓存是否有模板，如果有不处理，如果没有缓存模板
			weChatListTempSet().then(res => {

			}).catch((err) => {
				console.log(err);
			});

			// //检查缓存是否有模板，如果有不处理，如果没有缓存模板
			// weChatListTempSet().then(res => {

			// }).catch((err) => {
			//  console.log(err);
			// });

			// this.doctorId = idParam || 0; 
			this.getDoctorDetail();

		},
		methods: {
			openSubscribe: function(e) {
				openWenzhenSubscribe().then(res => {

				}).catch((err) => {
					console.log(err);
				});
			},
			checkall() {
				this.areastatus = 1;
			},
			birefall() {
				this.brieftatus = 1;
			},
			birefover() {
				this.brieftatus = 0;
			},
			checkover() {
				this.areastatus = 0;
			},
			callback() {
				const pages = getCurrentPages();
				if (pages.length === 1) {
					uni.switchTab({
						url: '/pages/homePage/index',
					})
				} else {
					uni.navigateBack();
				}
			},
			goto(url, checkStatus) {
				uni.navigateTo({
					url: url
				})
			},
			//去问诊items:1付费问诊 2 免费义诊
			toConsult(type) {
				let doctorId = this.doctorId;
				openWenzhenSubscribe().then(res => {
					uni.redirectTo({
						url: `/pagesSub/homePage/consult/choosePeople?type=${type}&doctorId=${doctorId}`
					})
				}).catch((err) => {
					console.log(err);
				});

			},
			toRePurchase() {
				let doctorId = this.doctorId;
				openWenzhenSubscribe().then(res => {
					uni.redirectTo({
						url: `/pagesSub/homePage/prescribing/choosePeople?doctorId=${doctorId}`
					})
				}).catch((err) => {
					console.log(err);
				});

			},

			getDoctorDetail: function() {
				let _this = this;
				uni.showLoading({
					title: '加载中'
				})
				//获取当前绑定的医生缓存中
				let doctorIdParam;
				let doctorIdCode = _this.doctorId; //扫码获取的医生id
				doctorDetail(doctorIdCode).then(res => {
					_this.doctorData = res.data
					uni.hideLoading()

				}).catch(err => {
					console.log(err)
					uni.hideLoading()
					_this.$util.Prom(500, err);
				});
			},

		}
	}
</script>

<style scoped>
	.bg_image {
		background-image: url(../../static/images/bg_h_doc@2x.png);
		width: 100%;
		height: 320rpx;
		background-size: 100% 100%;
		position: relative;
	}

	.doctorinfoCard {
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 30rpx;
	}

	.doctor_header {
		border-radius: 100%;
		background-color: #FFFFFF;
		width: 130rpx;
		height: 130rpx;
		margin-top: -70rpx;
		margin-left: 20rpx;
	}

	.doctor_header image {
		height: 100%;
		width: 100%;
		border-radius: 100%;
	}

	.doctorInfo {
		margin-left: 30rpx;
		font-size: 30rpx;
		width: 454rpx;
	}

	.goodat {
		display: flex;
		margin-top: 20rpx;
		font-size: 32rpx;
	}

	.service {
		display: flex;
		margin-top: 40rpx;
		font-size: 33rpx;
		font-weight: bold;
		letter-spacing: 3rpx;
	}

	.icon_line_green {
		height: 35rpx;
		padding: 4rpx;
		border-top-right-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
		background-color: #4FCBBF;
		position: absolute;
		left: 0;
	}

	.servicecard {
		padding: 30rpx;
		margin: 30rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}

	.img_icon {
		width: 65rpx;
		height: 65rpx;
		margin-top: 15rpx;
	}

	.service_content {
		margin-left: 30rpx;
		font-size: 29rpx;
	}

	.servicetitle {
		font-size: 31rpx;
		font-weight: bold;
		letter-spacing: 3rpx;
	}

	.btn_small {
		font-size: 27rpx;
		color: #FFFFFF;
		padding: 2rpx 15rpx;
		text-align: center;
		border-radius: 40rpx;
		background: -webkit-linear-gradient(#77E2A4, #4CCDBC);
		height: 50rpx;
		line-height: 50rpx;
	}

	.btn_small_gary {
		font-size: 27rpx;
		color: #6E6E6E;
		padding: 2rpx 15rpx;
		text-align: center;
		border-radius: 40rpx;
		background: #E6E6E5;
		height: 50rpx;
		line-height: 50rpx;
	}

	.header {
		display: flex;
	}

	.header>.title {
		color: #FFFFFF;
		font-size: 35rpx;
		margin-left: 35%;
	}

	.icon_right {
		width: 55rpx;
		height: 55rpx;
	}

	.csover {
		width: 70%;
		overflow: hidden;
		white-space: normal;
		word-break: break-all;
		height: 83rpx;
	}

	.csoverexper {
		width: 70%;
		overflow: hidden;
		white-space: normal;
		word-break: break-all;
		min-height: 83rpx;
	}

	.fontStyle {
		font-size: 29rpx;
		margin-left: 45%;
		color: #4CCCBF;
	}
</style>
